const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
	entry: {
		app: './src/index.js',
	},
	output: {
		path: path.resolve(__dirname, './dist/'),
		filename: '[name].bundle.js',
		
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: './src/index.html',
			filename:'./index.html'
			
		}),
		new MiniCssExtractPlugin({
            　　filename: "[name].bundle.css"
         })
	],
	module: {
		rules: [
			{
				test: /\.html$/,
				// 处理html文件的img图片（负责引入img，从而能被url-loader处理）
				// webpack5中使用 html-withimg-loader代替
				// loader: 'html-loader'
				loader: 'html-withimg-loader'
			},
			
			{
                test: /\.css$/,
                use: [
                    "style-loader",
                    MiniCssExtractPlugin.loader,
                    "css-loader"
                ]
			},
			{
				test: /\.(jpe?g|png|gif|svg)$/i,
				use: {
				  loader: 'file-loader',
				  options: {
					esModule: false,
					name:'img/[name].[ext]'
				  }
				},
				type: 'javascript/auto'
			  }
		]
	},
	mode: 'development',
	devServer: {
		open: true,
		port: 3000,
		compress: true,
		contentBase: './src',
		hot: true
	},
	devtool: "eval-cheap-module-source-map"
}
